import React, { useEffect, useState } from 'react'
import { Route, Link } from 'react-router-dom'
import Styles from './index.module.less'
import { getParams } from '../../../utils/getParams'
import { project } from '../../../service/index'

import Bscroll from 'better-scroll'
import SeachButtom from '../../../components/SearchButton'
import BtnLink from '../../../components/BtnLink'
import MenuItems from '../../../components/MenuItems'
const ProjectList = (props) => {
    const {history} = props
    const [List, setList] = useState([])
    useEffect(() => {
        project.getMenuListMethod({ id: getParams('shopId') }).then(res => {
            setList(res.data.kindMenus)
        })
    }, [])
    useEffect(() => {
        //  初始化better-scroll
        const scroll = new Bscroll('#scroll', {
            click: true
        })
        return () => {
            // 销毁的时候
            scroll.destroy()
        }
    }, [])
    return (
        <div>
            <SeachButtom cb={()=>{history.push('/project/search')}} icon="icon-search"></SeachButtom>
            <BtnLink cb={()=>{history.push('/shop')}} style={{bottom:'0.4rem',right:'0.2rem'}} icon="icon-publishgoods_fill">购物车</BtnLink>
           <MenuItems List={List} />
            <div id="scroll" className={Styles.list}>
                <main>
                    <nav>
                        <Link to="/project/list">
                            <i className="iconfont icon-examineandapprove"></i>
                            <span>随便点</span>
                        </Link>
                        <Link to="/project/hot">
                            <i className="iconfont icon-flag_fill"></i>
                            <span>热销榜</span>
                        </Link>
                        <Link to="/project/list">
                            <i className="iconfont icon-document_fill"></i>
                            <span>点过的菜</span>
                        </Link>
                        <a onClick={() => { }}>
                            <i className="iconfont icon-remind_fill"></i>
                            <span>服务铃</span>
                        </a>
                    </nav>
                    {
                        List.map((item, i) => {
                            let { items = [], index, name } = item
                            return (
                                <section key={index}>
                                    <h3>{name}</h3>
                                    <ul>
                                        {
                                            items.map((jitem, j) => {
                                                let { imagePath, name, memberPrice, price } = jitem
                                                return (
                                                    <li key={j}>
                                                        <img src={imagePath} alt="" />
                                                        <h4>{name}</h4>
                                                        <b>会员：￥{memberPrice}</b>
                                                        <span>原价：￥{price}</span>
                                                    </li>
                                                )
                                            })
                                        }
                                    </ul>
                                </section>
                            )
                        })
                    }
                </main>
            </div>
        </div>
    )
}
const RenderRoute = () => {
    return <Route path="/project/list" component={ProjectList} />
}
export default RenderRoute
